<template>
    <div class="doublelinechart">
		<chart :options="doubleline" ref="doubleline" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'

let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'doubleLineChart',
  components: {
    chart: Echarts
  },
  props: {
    chartData: Object
  },
  data() {
    return {
      doubleline: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "#EFF0F6"
            }
          },
          axisLabel: {
            color: "rgba(155,155,155,1)",
            fontSize: 12,
            lineHeight: 20,
            height: 20,
            margin: 10,
            fontFamily: "PingFang SC"
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#EFF0F6",
              type: 'dashed',
              width:'1'
            }
          },
          axisPointer: {
            type: "none"
          },
            data: []
        }
    ],
    yAxis: [
        {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            alignWithLabel: true,
            show: false
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#EFF0F6",
              type: 'dashed',
              width:'1'
            }
          },
          axisLabel: {
            color: "rgba(155,155,155,1)",
            show: true,
            inside: false,
            margin: 0,
            verticalAlign: "bottom",
            fontSize: 12,
            fontFamily: "PingFang SC",
            padding: [0, 0, 5, 0]
          },
          name: "",
          minInterval: 1
        }
    ],
        grid: {
          top: 32,
          left: 0,
          right: 0,
          bottom: 10,
          containLabel: true
        },
        series: [
          {
            name: '发帖',
            type: "line",
            smooth: true,
            symbol: "none",
            showSymbol: "false",
            data: [],
            areaStyle: {
              color: new echarts1.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(97,169,255,0.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(97,169,255,0)"
                  }
                ],
                false
              )
            },
            lineStyle: {
              color: "#045CAA",
              width: 2,
              shadowBlur: 4,
              shadowOffsetY: 2,
              shadowColor: "rgba(255,255,255,.5)"
            },
            label: {
              show: true,
              position: 'top',
              color: '#5096f5'
            }
          },
          {
            name: '回帖',
            type: "line",
            smooth: true,
            symbol: "none",
            showSymbol: "false",
            data: [],
            areaStyle: {
              color: new echarts1.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(255,167,226,0.31)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255,167,226,0)"
                  }
                ],
                false
              )
            },
            lineStyle: {
              color: "#F46FC2",
              width: 2,
              shadowBlur: 4,
              shadowOffsetY: 2,
              shadowColor: "rgba(255,255,255,.5)"
            },
            label: {
              show: true,
              position: 'top',
              color: '#5096f5'
            }
          }
        ],
        // tooltip: {
        //   show: true,
        //   trigger: "axis",
        //   backgroundColor: "#61A9FF",
        //   padding: 10,
        //   extraCssText: "text-align:left",
        //   textStyle: {
        //     fontSize: 12,
        //     fontWeight: "bold"
        //   },
        //   showContent: true
        // }
      }
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let self = this;
      this.init();
    });
  },
  methods: {
    init() {
      this.setLine();
    },
    setLine() {
      let self = this;
      this.doubleline.xAxis[0].data = [];
      this.doubleline.series[0].name = '';
      this.doubleline.series[0].data = [];
      this.doubleline.series[1].name = '';
      this.doubleline.series[1].data = [];
     
    //   {
    //        "types": ['发帖', '回帖'],
    //       "date": [],
    //       "post": [],
    //       "reply": []   
    //   }
      this.$nextTick(() => {
        var _types = "types" in this.chartData ? this.chartData.types : ['发帖', '回帖'];
          var _xTitles = "date" in  this.chartData ? this.chartData.date : [];
          var _d1 = "post" in this.chartData ? this.chartData.post : [];
          var _d2 = "reply" in this.chartData ? this.chartData.reply : [];

        this.doubleline.series[0].name = _types[0];
        this.doubleline.series[1].name = _types[1];
        if (_xTitles.length) {
            this.doubleline.xAxis[0].data = _xTitles;
            this.doubleline.series[0].data = _d1;
            this.doubleline.series[1].data = _d2;
          if (_xTitles.length > 14) {
            this.doubleline.dataZoom = [
              {
                type: "inside",
                startValue: 0,
                endValue: _xTitles.length,
                minSpan: 0,
                maxSpan: 100,
                zoomOnMouseWheel: false,
                moveOnMouseWheel: false,
                moveOnMouseMove: true
              },
              {
                type: "slider",
                show: true,
                startValue: 0,
                endValue: _xTitles.length,
                height: 15,
                handleSize: 22,
                showDataShadow: false,
                bottom: 0,
                textStyle: {
                  color: "transparent"
                },
                fillerColor: "#eee",
                borderColor: "#eee",
                handleStyle: {
                  color: "#c8c8c8"
                }
              }
            ];
            this.$refs.doubleline.clear();
            this.doubleline.grid.bottom = 30;
          } else {
            this.doubleline.dataZoom = null;
            this.$refs.doubleline.clear();
            this.doubleline.grid.bottom = 10;
          }
          // this.$refs.line.mergeOptions(this.line)
          setTimeout(() => {
            if (self.$refs.doubleline) {
              self.$refs.doubleline.mergeOptions(self.doubleline) 
            }
          }, 500);
        } else {
          this.$refs.doubleline.clear();
        }
      });
    },
    formatTime(timestamp) {
      let date = new Date(timestamp * 1000);
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${month}.${day}`;
    }
  },
  watch: {
    chartData(newVal) {
      if (newVal) {
        this.setLine();
      }
    }
  }
};
</script>

<style lang="scss">
.doublelinechart {
  height: 100%;
  margin: 0;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
